let box = document.querySelector(".box");
let img_box = document.querySelector(".img_box");
let liArr = document.querySelectorAll(".img_box>ul>li"); //获取img_box里的每一个li
let cloneImg = document.querySelector(".img_box>ul").firstElementChild.cloneNode(true); //克隆第一张图片
document.querySelector(".img_box>ul").appendChild(cloneImg); //添加克隆图片到ul

let index = 0; //记录当前第几张图片（索引值）
let flag = true; //设置左右按钮节流锁，防止用户疯狂点击按钮

// 事件委托
box.addEventListener("click", function(event) {

    // 一、点击右按钮
    (event.target.className === "arrow_right") && rightBtn();

    // 二、点击左按钮
    (event.target.className === "arrow_left") && leftBtn();

    (event.target.classList.contains("dot")) && dotFn();
});

// 封装右按钮函数
function rightBtn() {
    if (!flag) return; //判断锁的状态，是关闭直接结束函数

    index++;
    img_box.style.left = -590 * index + "px";

    // 写法1：
    // img_box.style.transition = ".5s ease"; //因为到克隆图片时，过渡会被去掉，所以要重新加上
    // if (index === liArr.length) { //在克隆图片上的操作
    //     setTimeout(function() {
    //         img_box.style.left = 0;
    //         index = 0;
    //         img_box.style.transition = "none";
    //     }, 500); //500毫秒后瞬间从克隆图片切换到第一张图片
    // };

    // 写法2：
    if (index === liArr.length) { //在克隆图片上的操作
        index = 0;
        img_box.addEventListener("transitionend", function() { //动画结束后
            img_box.style.transition = "none"; //清除过渡效果
            img_box.style.left = 0; //瞬间从克隆图片切换到第一张图片

            window.getComputedStyle(img_box, "style").getPropertyValue("transition");
            img_box.style.transition = ".5s ease"; //重新获取过渡效果
        }, {
            once: true
        });
    };

    flagFn(); //开关
    setCircles(); //小圆点
};

// 封装左按钮函数
function leftBtn() {
    if (!flag) return; //  判断锁的状态，是关闭直接结束函数

    if (index === 0) { //在第一张图片上的操作
        img_box.style.transition = "none"; //取消过渡
        img_box.style.left = -liArr.length * 590 + "px"; //瞬间从第一张图片切换到克隆图片上
        index = liArr.length - 1; //获取克隆图片的前一张图片索引值
        setTimeout(function() {
            img_box.style.transition = ".5s ease"; //重新加过渡
            img_box.style.left = -(liArr.length - 1) * 590 + "px"; //500毫秒后切换克隆图片的前一张图片
        });
    } else {
        index--;
        img_box.style.left = -590 * index + "px";
    };

    flagFn(); //开关
    setCircles(); //小圆点
};


// 封装控制开关函数
function flagFn() {
    flag = false;
    img_box.addEventListener("transitionend", function() {
        flag = true;
    });
};



// 三、点击小圆点封装函数
let dot_box = document.querySelector(".dot_box");
let circle = document.querySelectorAll(".dot_box>span");
circle.forEach(function(item, idx) {
    item.setAttribute("data-n", idx); //给每个小圆点设置data-n属性（索引值）
    item.classList.add("dot"); //给每个小圆点添加dot类名
});

function dotFn() {
    //事件委托
    dot_box.addEventListener("click", function(e) {
        // if (e.target.nodeName.toLowerCase() === "span") {
        if (e.target.classList.contains("dot")) {
            let n = e.target.getAttribute("data-n"); //获取指定小圆点的data-n的值
            let theCircle = circle[n]; //绑定指定的小圆点
            index = n; //data-n的值相当于是图片index的值
            img_box.style.left = -index * 590 + "px";
            setCircles();
        };
    });
};
dotFn();

//封装小圆点变色函数
function setCircles() {
    circle.forEach(function(item, idx) {
        if (idx === index % 5) {
            circle[idx].classList.add("dotActive");
        } else {
            circle[idx].classList.remove("dotActive");
        };
    });
};

// 四、自动轮播
let timer; //设置定时器
function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function() {
        rightBtn();
    }, 2000)
}
timeFn();

// let box = document.querySelector(".box");
// 鼠标移入box区域，停止轮播
box.addEventListener("mouseenter", function() {
    clearInterval(timer)
});

// 鼠标移出box区域，1s后轮播
box.addEventListener("mouseleave", function() {
    setTimeout(timeFn, 1000)
});

// 检测页面是否切换，切换就停止轮播
window.addEventListener("visibilitychange", function() {
    // console.log("qieping");
    if (document.hidden) {
        clearInterval(timer);
    } else {
        timeFn();
    };
});